<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <style type="text/css">
        #big{
            width: 500px;
            height: 300px;
            border: 1px solid gray;
        }
        #small{
            width: 200px;
            height: 100px;
            border: 2px solid gray;
            background-color: aqua;
            margin: 0 auto;;
            margin-top: 100px;
        }
        .one{
            -webkit-transform: skew(10deg,10deg);
            -moz-transform: skew(10deg,10deg);
            -ms-transform: skew(10deg,10deg);
            -o-transform: skew(10deg,10deg);
            transform: skew(10deg,10deg);
        }
        .two{
            -webkit-transform: skew(20deg,20deg);
            -moz-transform: skew(20deg,20deg);
            -ms-transform: skew(20deg,20deg);
            -o-transform: skew(20deg,20deg);
            transform: skew(20deg,20deg);;
        }
        .three{
            -webkit-transform: skew(30deg,30deg);
            -moz-transform: skew(30deg,30deg);
            -ms-transform: skew(30deg,30deg);
            -o-transform: skew(30deg,30deg);
            transform: skew(30deg,30deg);
        }
        .four{
            -webkit-transform: skew(40deg,40deg);
            -moz-transform: skew(40deg,40deg);
            -ms-transform: skew(40deg,40deg);
            -o-transform: skew(40deg,40deg);
            transform: skew(40deg,40deg);
        }
        .five{
            -webkit-transform: skew(50deg,50deg);
            -moz-transform: skew(50deg,50deg);
            -ms-transform: skew(50deg,50deg);
            -o-transform: skew(50deg,50deg);
            transform: skew(50deg,50deg);
        }
    </style>
</head>
<body>
<form action="#" method="post" >
    <input type="radio" value="skew(10deg,10deg)" name="translate" id="one"/>
    <label for="one">skew(10deg,10deg)</label><br/>
    <input type="radio" value="skew(20deg,20deg)" name="translate" id="two"/>
    <label for="two">skew(20deg,20deg)</label><br/>
    <input type="radio" value="skew(30deg,30deg)" name="translate" id="three"/>
    <label for="three">skew(30deg,30deg)</label><br/>
    <input type="radio" value="skew(40deg,40deg)" name="translate" id="four"/>
    <label for="four">skew(40deg,40deg)</label><br/>
    <input type="radio" value="skew(50deg,50deg)" name="translate" id="five"/>
    <label for="five">skew(50deg,50deg)</label><br/>
</form>
<div id="big">
    <div id="small">

    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("input").click(function () {
            $("#small").removeClass();
            var inp=$(this).attr("id");
            $("#small").addClass(inp);
        });
    });

</script>
</body>
</html>